<template>
<view class="container">
  <uni-card>
    <view>在路由的beforeEach里添加了初始化检查，请观察应用状态</view>
    <view class="text-area">
      <text>应用状态：{{ inited ? '已初始化' :'未初始化' }}</text>
    </view>
    <view class="text-area">
      <text>应用名称：{{ appName }}</text>
    </view>
  </uni-card>
  <uni-card>
    <view>点击登录和退出登录，观察登录状态</view>
    <view class="text-area">
      <text>登录状态：{{ logined ? '已登录' :'未登录' }}</text>
    </view>
    <view class="text-area" v-if="logined">
      <text>用户名：{{ userInfo.username }}</text>
    </view>
  </uni-card>

  <uni-card>
    <uni-row>
      <uni-col :span="12"><button @click="login">登录</button></uni-col>
      <uni-col :span="12"><button @click="logout">退出登录</button></uni-col>
    </uni-row>
  </uni-card>
  <uni-card>
    <uni-forms :modelValue="formData">
      <view>你可以修改名称，看看计算值是否跟着变</view>
			<uni-forms-item label="姓名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
			</uni-forms-item>
      <uni-forms-item label="计算值">
				{{helloName}}
			</uni-forms-item>
		</uni-forms>
  </uni-card>

  <uni-card>
    <view>用户信息组件</view>
    <MyProfile :age="30" :name="formData.name"></MyProfile>
  </uni-card>


  <uni-card>
    <uni-row>
      <uni-col :span="24"><button @click="testConsole">控制台测试</button></uni-col>
    </uni-row>
  </uni-card>

  <uni-card>
    <uni-row>
      <uni-col :span="8">
        <router-link name="login" :query="{id:'testid'}"><button>跳转到登录页</button></router-link>
        </uni-col>
      <uni-col :span="8">
        <navigator url="/pages/login/login" hover-class="navigator-hover">
          <button type="default">跳转到登录页2</button>
        </navigator>
      </uni-col>
      <uni-col :span="8"><button @click="gotoUserProfile">跳转到用户首页</button></uni-col>
    </uni-row>
  </uni-card>

</view>
</template>

<script lang="ts">
import {MyPage} from '@/my/super'
import {Action, Provide,Getter,Options,State,Watch} from '@gowiny/vue-class'
import MyProfile from '@/components/test/my-profile.vue'
import RouterLink from '@gowiny/uni-router/dist/components/router-link/router-link.vue'

@Options({
  components:{
    RouterLink,
    MyProfile
  }
})
class IndexPage extends MyPage{
  title:string="你好呀"
  private _IndexPage_testData :string="我是 IndexPage 的 testData"
    get testData(){
      //throw new Error('------')
        return this._IndexPage_testData
    }
    set testData(val:string){
        this._IndexPage_testData = val
    }
    formData={
      name:''
    }
    get helloName(){
      return '您好,' + (this.formData.name||'')
    }
    @State("user.logined")
    readonly logined!:boolean
    @Getter("app/isInited")
    readonly inited!:boolean
    @State("app.appName")
    readonly appName!:string


    @Action("user/logout")
    logout!:()=>void

    @Action("user/setLoginResult")
    setLoginResult!:(loginResult:any)=>void

    @State("user.userInfo")
    readonly userInfo!:any

    @Provide
    testInject(){
      uni.showModal({
        content:'我是 IndexPage 提供的 testInject 方法'
      })
    }

    @Provide
    provideValue1:string="index provideValue1"

    @Provide
    get provideValue3(){
      return this.formData.name
    }

    login(){
      this.setLoginResult({
        success:true,
        userInfo:{
          username:'gowiny'
        }
      })
      console.log('我登录了')
    }

    printTestData(){
        super.printTestData()
        console.log(`IndexPage.testData=${this._IndexPage_testData}`)
    }
    mounted(){
      super.mounted()
      console.debug(`我是 IndexPage 的 mounted,this.testData: [${this.testData}],super.testData: [${super.testData}]`)
    }
    @Watch('testData')
    watchTestDataChange(val:string){
      console.debug('testData 的值改变了。新值:' + val)
    }
    @Watch('formData.name')
    watchFormDataNameChange(val:string){
      console.debug('formData.name 已改变，新值:' + val)
    }
    onShow(){
      console.log(`我是 IndexPage 的 onShow,this.testData: [${this.testData}],super.testData: [${super.testData}]`)
    }
    onHide(){
      super.onHide()
      console.log(`我是 IndexPage 的 onHide,this.testData: [${this.testData}],super.testData: [${super.testData}]`)
    }
    gotoLogin(){
      this.$Router.push({
        name:'login'
      })
    }
    gotoUserProfile(){
      this.$Router.push({
        path:'/pages/user/profile'
      })
    }
    testConsole(){
      this.testData = '我是 IndexPage 的 testData ' + Math.random()
      this.printTestData()
    }
    test(){
      console.log('this.formData',this.formData)
    }
}

export default IndexPage
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 100rpx;
  width: 100rpx;
  margin-top: 100rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
